<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="/js/layui/css/layui.css">
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=gXLkbXzN7kOR22S6iszA2Zfe6yIkK0s4"></script>
	<script type="text/javascript" src="/js/jquery-3.2.1.js"></script>
</head>
<body>
<form class="layui-form"  id="form1"  lay-filter="edit">
	<input type="hidden" name="id">
	<div style="float: left;border: 0.5px;padding-top: 10px;padding-left: 100px;">
		<div class="layui-form-item">
			<label class="layui-form-label">救援地址</label>
			<div class="layui-input-inline">
				<input type="address" id="address" name="address"  required lay-verify="required" placeholder="救援地址" autocomplete="off" class="layui-input">
			</div>
			<button class="layui-btn" type="button" onclick="codeAddress()" id="search" >搜索</button>
		</div>
		<div style="width: 400px;height: 400px;" id="allmap" ></div>
	</div>
	<div class="container" style="float: left;margin: 50px;  padding: 5px;  " >
		<div class="layui-form-item" style="margin-top: 10px;">
			<label class="layui-form-label">订单状态</label>
			<div class="layui-input-inline" >
				<select name="status" id="status">
					<option value="0">刚下单</option>
					<option value="3">已完成</option>
					<option value="-1">作废</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手&nbsp;机&nbsp;号</label>
			<div class="layui-input-inline">
				<input type="phone" name="phone" disabled required lay-verify="required" placeholder="手机号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
			<div class="layui-input-inline">
				<input type="name" name="name" disabled required lay-verify="required" placeholder="客户姓名" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">车&nbsp;牌&nbsp;号</label>
			<div class="layui-input-inline">
				<input type="car" name="car" disabled required lay-verify="required" placeholder="车牌号" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">救援项目</label>
			<div class="layui-input-inline">
				<select name="contents" id="contents" lay-verify="contents"  lay-filter="contents">
					<option selected="selected" value="电瓶搭电">电瓶搭电</option>
					<option value="补胎">补胎</option>
					<option value="拖车">拖车</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">金额</label>
			<div class="layui-input-inline">
				<input type="cost" readonly="readonly" id="cost" name="cost" required lay-verify="required" placeholder="价钱" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item" id="formDemo">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="formDemo" >提交</button>
			</div>
		</div>
	</div>
	<input name="lng" id="lng" type="hidden"/>
	<input name="lat" id="lat" type="hidden"/>
</form>
</body>
<script type="text/javascript" src="/js/layui/layui.js"></script>
<script>
	var orders=window.parent.orders;
	layui.use(['form','layer','jquery'], function(){
		var form = layui.form,
				$ = layui.jquery,
				layer = layui.layer;
		var form = layui.form;
		form.val("edit", orders);
		if(orders.status=="-1"||orders.status=="3"){
			codeAddress();
			$("#formDemo").hide();
		}else{
			//监听提交
			form.on('submit(formDemo)', function(data){
				var data1= form.val("edit");
				$.ajax({
					url : '/orders/update',// 跳转到 action
					type : 'post',
					data :data1,
					success : function(rs) {
						console.log(rs);
						if(rs.code=='200'){
							layer.msg(rs.msg);
							parent.layer.closeAll();
						}else{
							layer.msg(rs.msg);
						}
					}
				});
				return false;
			});
		}
	});
</script>
<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	var point = new BMap.Point(113.667632,34.75413);
	var marker2 = new BMap.Marker(point);  // 创建标注
	map.enableScrollWheelZoom(true);
	map.addOverlay(marker2);
	// 设置地图显示的城市 此项是必须设置的
	map.setCurrentCity("河南省郑州市火车站");
	map.centerAndZoom(point, 14);  // 初始化地图,设置中心点坐标和地图级别
	map.addEventListener("click", showInfo);
	function showInfo(e){
		map.removeOverlay(marker2);
		document.getElementById("lng").value=e.point.lng;
		document.getElementById("lat").value=e.point.lat;
		marker2 = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat));
		//获取计算金额
		$.get("/getMoney?lng="+e.point.lng+"&lat="+e.point.lat,function(data){$("#cost").val(data);});
		map.addOverlay(marker2);
	}
	var geoc = new BMap.Geocoder();
	map.addEventListener("click", function(e){
		var pt = e.point;
		var aa;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			aa = addComp.city+ addComp.district+ addComp.street+ addComp.streetNumber;
			document.getElementById("address").value = aa;
		});
	});
	function codeAddress() {
		// 创建地址解析器实例
		var myGeo = new BMap.Geocoder();
		// 将地址解析结果显示在地图上,并调整地图视野
		myGeo.getPoint(document.getElementById("address").value, function (point) {
			if (point) {
				map.removeOverlay(marker2);
				map.centerAndZoom(point, 14);
				document.getElementById("lng").value = point.lng;
				document.getElementById("lat").value = point.lat;
				//获取计算金额
				$.get("/getMoney?lng="+point.lng+"&lat="+point.lat,function(data){$("#cost").val(data);});
				marker2 = new BMap.Marker(point);
				map.addOverlay(marker2);
			} else {
				map.removeOverlay(marker2);
				alert("您输入的地址在地图中未找到，请重新输入地址!");
			}
		}, "");
	}
</script>

</html>